<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面包屑 -->
        <!-- 卡片 -->
        <br>
        <el-card>
            <!-- 添加角色· -->
            <el-row>
                <el-col>
                    <el-button
                        type="primary"
                        @click="dialogVisible=true"
                    >添加角色</el-button>
                </el-col>
            </el-row>
            <!-- 添加角色 -->
            <!-- 表格 -->
            <el-table
                :data="rolesuser"
                style="width: 100%"
            >
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <div>
                            <!-- 标签 -->
                            <el-row
                                v-for="item in scope.row.children"
                                :key="item.id"
                                style="border:1px solid #f2f2f2"
                            >
                                <el-col :span="4">
                                    <!-- 第一层 -->
                                    <el-tag
                                        closable
                                        @close="rightslist(scope.row.id,item.id,scope.row)"
                                        style="margin:5px"
                                    >{{item.authName}}</el-tag>
                                </el-col>
                                <el-col :span="20">
                                    <el-row
                                        v-for="itm in item.children"
                                        :key="itm.id"
                                    >
                                        <el-col :span="10">
                                            <!-- 第二层 -->
                                            <el-tag
                                                closable
                                                @close="rightslist(scope.row.id,itm.id,scope.row)"
                                                type="success"
                                                style="margin:5px"
                                            >{{itm.authName}}</el-tag>
                                        </el-col>
                                        <el-col :span="12">
                                            <!-- 第三层 -->
                                            <el-tag
                                                closable
                                                @close="rightslist(scope.row.id,it.id,scope.row)"
                                                type="info"
                                                v-for="it in itm.children"
                                                :key="it.id"
                                                style="margin:5px"
                                            >{{it.authName}}</el-tag>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <!-- 标签 -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="#"
                    type="index"
                >
                </el-table-column>
                <el-table-column
                    label="角色名称"
                    prop="roleName"
                >
                </el-table-column>
                <el-table-column
                    label="角色描述"
                    prop="roleDesc"
                >
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div>
                            <!-- 编辑按钮 -->
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                @click="rolesEdit(scope.row)"
                            >编辑</el-button>
                            <!-- 编辑按钮 -->
                            <!-- 删除按钮 -->
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                @click="rolesdel(scope.row)"
                            >删除</el-button>
                            <!-- 删除按钮 -->
                            <!-- 权限按钮 -->
                            <el-button
                                type="warning"
                                icon="el-icon-edit"
                                @click="roleslist(scope.row)"
                            >分配权限</el-button>
                            <!-- 权限按钮 -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格 -->
        </el-card>
        <!-- 卡片 -->
        <!-- 添加角色模态框 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
        >
            <el-form :model="rolesadd">
                <el-form-item label="角色名称">
                    <el-input v-model="rolesadd.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="rolesadd.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="rolesAdd"
                >确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加角色模态框 -->
        <!-- 编辑角色模态框 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="30%"
        >
            <el-form :model="rolesedit">
                <el-form-item label="角色名称">
                    <el-input v-model="rolesedit.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="rolesedit.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="rolesdoedit"
                >确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑角色模态框 -->
        <!-- 分配权限模态框 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible2"
            width="30%"
        >
            <!-- 树形结构 -->
            <el-tree
                :data="treelist"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="checkedarr"
                :props="defaultProps"
                :default-expand-all="true"
                ref="TreeListarr"
            >

            </el-tree>
            <!-- 树形结构 -->
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="rolesOk"
                >确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分配权限模态框 -->
    </div>
</template>

<script>
export default {
  data() {
    return {
      // 角色列表
      rolesuser: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      //   添加角色
      rolesadd: {
        roleName: "",
        roleDesc: ""
      },
      rolesedit: {
        roleName: "",
        roleDesc: "",
        id: 0
      },
      treelist: [],
      defaultProps: {
        children: "children",
        label: "authName"
      },
      checkedarr: [],
      treeid: 0
    };
  },
  created() {
    this.xr();
  },
  methods: {
    //   渲染角色列表
    async xr() {
      let res = await this.$API.JueSe();
      //   console.log("角色列表", res);
      this.rolesuser = res;
      console.log("角色列表", this.rolesuser);
    },
    // 添加角色
    async rolesAdd() {
      let res = await this.$API.RolesAdd(this.rolesadd);

      console.log("添加角色接口", res);
      this.xr();
      this.dialogVisible = false;
      this.rolesadd = {};
    },
    // 删除角色
    async rolesdel(row) {
      console.log("删除角色", row);
      let res = await this.$API.RolesDel(row.id);
      this.xr();
    },
    // 编辑角色
    rolesEdit(row) {
      console.log("回填数据", row);
      this.dialogVisible1 = true;
      this.rolesedit.roleName = row.roleName;
      this.rolesedit.roleDesc = row.roleDesc;
      this.rolesedit.id = row.id;
    },
    // 确认编辑
    async rolesdoedit() {
      let res = await this.$API.RolesEdit(this.rolesedit);
      console.log("提交编辑内容", res);
      this.dialogVisible1 = false;
      this.xr();
    },
    // 删除权限标签
    // 传的三个参数，一个角色id，一个权限id，一个获取的是当前点的列表数据，用于局部渲染
    async rightslist(rolesid, rightsid, row) {
      let res = await this.$API.RightRoled(rolesid, rightsid);
      console.log("删除后的最新数据", res);
      console.log("rolesid", rolesid);
      console.log("rightsid", rightsid);
      console.log("row", row);
      row.children = res;
      // this.xr()
    },
    // 树形权限模态框
    async roleslist(row) {
      this.checkedarr = [];
      this.dialogVisible2 = true;
      console.log("row", row);
      // 树形权限列表
      let res = await this.$API.RightList("tree");
      console.log("权限列表", res);
      this.treelist = res;
      this.rolesdigui(row, this.checkedarr);
      console.log("checkedarr", this.checkedarr);
      this.treeid = row.id;
    },
    // 递归获取id
    rolesdigui(row, checkedarr) {
      //   console.log("row", row);
      //   console.log("checkedarr", checkedarr);

      if (!row.children) {
        return checkedarr.push(row.id);
      }

      row.children.forEach(item => {
        this.rolesdigui(item, checkedarr);
      });
    },
    // 确认模态框
    async rolesOk() {
      // 返回被选中节点的keys
      let arr1 = this.$refs.TreeListarr.getCheckedKeys();
      // 返回被半选中节点的keys
      let arr2 = this.$refs.TreeListarr.getHalfCheckedKeys();
      console.log("arr1", arr1, arr2);
      //   合并数组
      let hebing = [...arr1, ...arr2];
      console.log("hebing", hebing);
      //   转字符串
      let str = hebing.join(",");
      let res = await this.$API.RolesList(this.treeid, str);
      console.log("确认提交", res);
      this.dialogVisible2 = false;
      this.xr();
    }
  }
};
</script>

<style scoped >
</style>
